<template>
	<div class="page_root" id="root_index">
		<div class="warp">
			<div class="container-fluid">
				<el-row>
					<el-col :span="4">
						<div_label bg_color="bg_purple" icon="el-icon-user-solid" :url="url_user_count" unit="人"
								  title="用户数量"></div_label>
					</el-col>
				</el-row>

				<el-row>
									<el-col v-if="user_group == '管理员' || $check_figure('/score_analysis/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_score_analysis.values.length > 0" id="bar_obj_score_analysis" :vm="bar_obj_score_analysis" :title="'得分分析统计'">
							</newBarChart>
							<div v-if="!bar_obj_score_analysis.values.length">得分分析没有符合条件的数据</div>
								</div>
					</el-col>
							<el-col v-if="user_group == '管理员' || $check_figure('/backboard_analysis/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_backboard_analysis.values.length > 0" id="bar_obj_backboard_analysis" :vm="bar_obj_backboard_analysis" :title="'篮板分析统计'">
							</newBarChart>
							<div v-if="!bar_obj_backboard_analysis.values.length">篮板分析没有符合条件的数据</div>
								</div>
					</el-col>
							<el-col v-if="user_group == '管理员' || $check_figure('/assist_analysis/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_assist_analysis.values.length > 0" id="bar_obj_assist_analysis" :vm="bar_obj_assist_analysis" :title="'助攻分析统计'">
							</newBarChart>
							<div v-if="!bar_obj_assist_analysis.values.length">助攻分析没有符合条件的数据</div>
								</div>
					</el-col>
							<el-col v-if="user_group == '管理员' || $check_figure('/cap_analysis/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_cap_analysis.values.length > 0" id="bar_obj_cap_analysis" :vm="bar_obj_cap_analysis" :title="'盖帽分析统计'">
							</newBarChart>
							<div v-if="!bar_obj_cap_analysis.values.length">盖帽分析没有符合条件的数据</div>
								</div>
					</el-col>
							<el-col v-if="user_group == '管理员' || $check_figure('/preemptive_analysis/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_preemptive_analysis.values.length > 0" id="bar_obj_preemptive_analysis" :vm="bar_obj_preemptive_analysis" :title="'抢断分析统计'">
							</newBarChart>
							<div v-if="!bar_obj_preemptive_analysis.values.length">抢断分析没有符合条件的数据</div>
								</div>
					</el-col>
							<el-col v-if="user_group == '管理员' || $check_figure('/three_point_analysis_of_the_team/table')" :span="8">
						<div class="card chart">
									<newLineChart v-if="line_obj_three_point_analysis_of_the_team.values.length > 0" id="line_obj_three_point_analysis_of_the_team" :vm="line_obj_three_point_analysis_of_the_team" :title="'球队三分分析统计'">
							</newLineChart>
							<div v-if="!line_obj_three_point_analysis_of_the_team.values.length">球队三分分析没有符合条件的数据</div>
								</div>
					</el-col>
							<el-col v-if="user_group == '管理员' || $check_figure('/team_two_point_analysis/table')" :span="8">
						<div class="card chart">
									<newLineChart v-if="line_obj_team_two_point_analysis.values.length > 0" id="line_obj_team_two_point_analysis" :vm="line_obj_team_two_point_analysis" :title="'球队两分分析统计'">
							</newLineChart>
							<div v-if="!line_obj_team_two_point_analysis.values.length">球队两分分析没有符合条件的数据</div>
								</div>
					</el-col>
					</el-row>


			</div>
		</div>
	</div>
</template>
<script>
	import mixin from "@/mixins/page.js";
	import newBarChart from "@/components/charts/new_bar_chart";
	import newLineChart from "@/components/charts/new_line_chart";
	import div_label from "@/components/div_label.vue";
	export default {
		mixins: [mixin],
		name: "Home",
		components: {
			newBarChart,
			newLineChart,
			div_label
		},
		data() {
			return {
				activeName: "third",
											bar_obj_score_analysis: {
					names:[],
					xAxis: [],
					values:[]
				},
						bar_obj_backboard_analysis: {
					names:[],
					xAxis: [],
					values:[]
				},
						bar_obj_assist_analysis: {
					names:[],
					xAxis: [],
					values:[]
				},
						bar_obj_cap_analysis: {
					names:[],
					xAxis: [],
					values:[]
				},
						bar_obj_preemptive_analysis: {
					names:[],
					xAxis: [],
					values:[]
				},
						line_obj_three_point_analysis_of_the_team:{
					names:[],
					xAxis: [],
					values:[]
				},
						line_obj_team_two_point_analysis:{
					names:[],
					xAxis: [],
					values:[]
				},
					url_user_count: "~/api/user/count?",
			};
		},
		created() {
							// 执行得分分析数据获取
			this.get_list_score_analysis();
					// 执行篮板分析数据获取
			this.get_list_backboard_analysis();
					// 执行助攻分析数据获取
			this.get_list_assist_analysis();
					// 执行盖帽分析数据获取
			this.get_list_cap_analysis();
					// 执行抢断分析数据获取
			this.get_list_preemptive_analysis();
					// 执行球队三分分析数据获取
			this.get_list_three_point_analysis_of_the_team();
					// 执行球队两分分析数据获取
			this.get_list_team_two_point_analysis();
			},
		mounted() {},
		methods: {
			async get_nickname(list,flag){
				if (flag) {
					for (let i=0;i<list.length;i++){
						await this.$get(
								"~/api/user/get_obj?user_id="+list[i],
								null,
								(json) => {
									if (json.result) {
										list[i] = json.result.obj.nickname;
									}
								});
					}
				}else {
					for (let i=0;i<list.length;i++){
						await this.$get(
								"~/api/user/get_obj?user_id="+list[i].name,
								null,
								(json) => {
									if (json.result) {
										list[i].name = json.result.obj.nickname;
									}
								});
					}
				}
			},
										// 获取得分分析统计图
			async get_list_score_analysis() {
				let name_list = [];
				let query_str = "";
									let group_by_value = "player_name";
								let flag = false;
												let date_flag = "其他"
																																														name_list.push("总得分");
				query_str = query_str+"total_score"+","
									this.bar_obj_score_analysis.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						await this.$get(
						"~/api/score_analysis/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_score_analysis.xAxis = xAxis;
								this.bar_obj_score_analysis.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_score_analysis.xAxis,true);
							}
						});
			},
					// 获取篮板分析统计图
			async get_list_backboard_analysis() {
				let name_list = [];
				let query_str = "";
									let group_by_value = "player_name";
								let flag = false;
												let date_flag = "其他"
																																														name_list.push("篮板总数");
				query_str = query_str+"total_number_of_rebounds"+","
									this.bar_obj_backboard_analysis.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						await this.$get(
						"~/api/backboard_analysis/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_backboard_analysis.xAxis = xAxis;
								this.bar_obj_backboard_analysis.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_backboard_analysis.xAxis,true);
							}
						});
			},
					// 获取助攻分析统计图
			async get_list_assist_analysis() {
				let name_list = [];
				let query_str = "";
									let group_by_value = "player_name";
								let flag = false;
												let date_flag = "其他"
																																														name_list.push("助攻次数");
				query_str = query_str+"number_of_assists"+","
									this.bar_obj_assist_analysis.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						await this.$get(
						"~/api/assist_analysis/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_assist_analysis.xAxis = xAxis;
								this.bar_obj_assist_analysis.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_assist_analysis.xAxis,true);
							}
						});
			},
					// 获取盖帽分析统计图
			async get_list_cap_analysis() {
				let name_list = [];
				let query_str = "";
									let group_by_value = "player_name";
								let flag = false;
												let date_flag = "其他"
																																														name_list.push("盖帽次数");
				query_str = query_str+"blocked_shots"+","
									this.bar_obj_cap_analysis.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						await this.$get(
						"~/api/cap_analysis/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_cap_analysis.xAxis = xAxis;
								this.bar_obj_cap_analysis.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_cap_analysis.xAxis,true);
							}
						});
			},
					// 获取抢断分析统计图
			async get_list_preemptive_analysis() {
				let name_list = [];
				let query_str = "";
									let group_by_value = "player_name";
								let flag = false;
												let date_flag = "其他"
																																														name_list.push("抢断次数");
				query_str = query_str+"number_of_steals"+","
									this.bar_obj_preemptive_analysis.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						await this.$get(
						"~/api/preemptive_analysis/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_preemptive_analysis.xAxis = xAxis;
								this.bar_obj_preemptive_analysis.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_preemptive_analysis.xAxis,true);
							}
						});
			},
					// 获取球队三分分析统计图数据
			async get_list_three_point_analysis_of_the_team() {
																			let group_by_value = "team";
				let data = {};
								let flag = false;
												await this.$get(
					"~/api/three_point_analysis_of_the_team/get_list?groupby="+group_by_value,data,
					(json) => {
						if (json.result) {
							let list = json.result.list;
							let name_list = [];
							for (let i=0;i<list.length;i++){
								name_list.push(list[i].team);
							}
							this.line_obj_three_point_analysis_of_the_team.names = name_list;
							this.get_list_three_point_analysis_of_the_team_sub("team",flag);
						}
				});
																		},
			async get_list_three_point_analysis_of_the_team_sub(v1,names_flag) {
																													let data = {};
								let flag = false;
												await this.$get(
					"~/api/three_point_analysis_of_the_team/get_list?groupby=competition_year",data,
					(json) => {
						if (json.result) {
							let list = json.result.list;
							let xAxis_list = [];
							for (let i=0;i<list.length;i++){
												xAxis_list.push(list[i].competition_year);
											}
							this.line_obj_three_point_analysis_of_the_team.xAxis = xAxis_list;
							this.get_list_three_point_analysis_of_the_team_sub_sub(v1,"competition_year",names_flag,flag);
						}
				});
								},
			async get_list_three_point_analysis_of_the_team_sub_sub(v1,v2,names_flag,xAxis_flag) {
																								let data_str = "{\""+v1+"\":\"\",\""+v2+"\":\"\"}";
				let data = JSON.parse(data_str);
								for (let i=0;i<this.line_obj_three_point_analysis_of_the_team.xAxis.length;i++){
					let list = []
					for (let j=0;j<this.line_obj_three_point_analysis_of_the_team.names.length;j++){
						data[v2] = this.line_obj_three_point_analysis_of_the_team.xAxis[i];
						data[v1] = this.line_obj_three_point_analysis_of_the_team.names[j];
						await this.$get(
								"~/api/three_point_analysis_of_the_team/sum?field=triple_hit_count",
								data,
								(json) => {
									if (json.result) {
										list[j] = json.result;
									}else {
										list[j] = 0;
									}
								});
					}
					this.line_obj_three_point_analysis_of_the_team.values.push(list)
				}
				if (names_flag){
					this.get_nickname(this.line_obj_three_point_analysis_of_the_team.names,true);
				}
				if (xAxis_flag){
					this.get_nickname(this.line_obj_three_point_analysis_of_the_team.xAxis,true);
				}
													},
					// 获取球队两分分析统计图数据
			async get_list_team_two_point_analysis() {
																			let group_by_value = "team";
				let data = {};
								let flag = false;
												await this.$get(
					"~/api/team_two_point_analysis/get_list?groupby="+group_by_value,data,
					(json) => {
						if (json.result) {
							let list = json.result.list;
							let name_list = [];
							for (let i=0;i<list.length;i++){
								name_list.push(list[i].team);
							}
							this.line_obj_team_two_point_analysis.names = name_list;
							this.get_list_team_two_point_analysis_sub("team",flag);
						}
				});
																		},
			async get_list_team_two_point_analysis_sub(v1,names_flag) {
																													let data = {};
								let flag = false;
												await this.$get(
					"~/api/team_two_point_analysis/get_list?groupby=competition_year",data,
					(json) => {
						if (json.result) {
							let list = json.result.list;
							let xAxis_list = [];
							for (let i=0;i<list.length;i++){
												xAxis_list.push(list[i].competition_year);
											}
							this.line_obj_team_two_point_analysis.xAxis = xAxis_list;
							this.get_list_team_two_point_analysis_sub_sub(v1,"competition_year",names_flag,flag);
						}
				});
								},
			async get_list_team_two_point_analysis_sub_sub(v1,v2,names_flag,xAxis_flag) {
																								let data_str = "{\""+v1+"\":\"\",\""+v2+"\":\"\"}";
				let data = JSON.parse(data_str);
								for (let i=0;i<this.line_obj_team_two_point_analysis.xAxis.length;i++){
					let list = []
					for (let j=0;j<this.line_obj_team_two_point_analysis.names.length;j++){
						data[v2] = this.line_obj_team_two_point_analysis.xAxis[i];
						data[v1] = this.line_obj_team_two_point_analysis.names[j];
						await this.$get(
								"~/api/team_two_point_analysis/sum?field=two_point_hit_count",
								data,
								(json) => {
									if (json.result) {
										list[j] = json.result;
									}else {
										list[j] = 0;
									}
								});
					}
					this.line_obj_team_two_point_analysis.values.push(list)
				}
				if (names_flag){
					this.get_nickname(this.line_obj_team_two_point_analysis.names,true);
				}
				if (xAxis_flag){
					this.get_nickname(this.line_obj_team_two_point_analysis.xAxis,true);
				}
													},
	
		},
		computed:{
			recognitionHeight(){
				return "830px"
			},
			recognitionUrl(){
				return "https://www.faceplusplus.com.cn/${model.filter.recognitionType}/"
			}
		}
	};
</script>

<style scoped="scoped">
	.chart {
		display: block;
		width: 100%;
		height: 400px;
		padding: 1rem;
		position: relative;
	}

	.el-col {
		padding: 0.5rem;
	}

	.card {
		overflow: hidden;
	}

	.iframe_box ,.iframe_box_change{
		width: 100%;
		height: 1180px;
		position: relative;
		margin-top: 25px;
	}
	.iframe_box_change{
		height: 580px;
		padding-top: 50px;
	}
	.iframe_box	.iframe_box_content, .iframe_box_change .iframe_box_content{
		width: 100%;
		height: 100%;
	}
	.iframe_box_top{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		font-size: 25px;
		line-height: 100px;
		background: #fff;
		z-index: 99999999;
		padding-left: 50px;
	}
	#iframe_box_face div::before {
		content: '';
		width: 100px;
		position: absolute;
		top: 154px;
		right: 129px;
		z-index: 999;
		height: 20px;
		background-color: #FFFFFF;
	}

	#iframe_box_face>h1 {
		margin-top: 100px;
		margin-bottom: 20px;
	}
</style>
